<template>
  <div class="news">
    <p class="headline">进出口食品峰会</p>
    <p class="description">一对一精准对接</p>
    <div class="news-center">
      <calendar></calendar>
      <div class="news-list-container">
        <p class="title">即将举行的峰会</p>
        <ul class="news-list-wrapper">
          <li>
            <div theme class="time-wrapper">
              <span>17-18</span>
              <span>五月</span>
            </div>
            <div class="content-wrapper">
              <p class="title">
                <span class="address" themeColor>Shanghai</span>
                <span class="time">2019.05.17 - 2019.05.18</span>
              </p>
              <p class="detail">名称名称名称名称名称名称名称名称名称名称名称名</p>
            </div>
          </li>
          <li>
            <div theme class="time-wrapper">
              <span>17-18</span>
              <span>五月</span>
            </div>
            <div class="content-wrapper">
              <p class="title">
                <span class="address" themeColor>Shanghai</span>
                <span class="time">2019.05.17 - 2019.05.18</span>
              </p>
              <p class="detail">名称名称名称名称名称名称名称名称名称名称名称名</p>
            </div>
          </li>
          <li>
            <div theme class="time-wrapper">
              <span>17-18</span>
              <span>五月</span>
            </div>
            <div class="content-wrapper">
              <p class="title">
                <span class="address" themeColor>Shanghai</span>
                <span class="time">2019.05.17 - 2019.05.18</span>
              </p>
              <p class="detail">名称名称名称名称名称名称名称名称名称名称名称名</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <button class="view-more" opacity themeColor themeBorder-2>查看更多</button>
  </div>
</template>

<script>
import Calendar from 'vue-calendar-component/src/calendar.vue'
export default {
  name: 'News',
  components: {
    'calendar': Calendar
  }
}
</script>

<style lang="scss" scoped>
.news {
  box-sizing: border-box;
  padding: .8rem 0 2rem;
  .headline {
    text-align: center;
    font-size: .64rem;
    line-height: 1em;
  }
  .description {
    text-align: center;
    color: #666;
    margin-top: .32rem;
  }
  .news-center {
    width: 24rem;
    margin: 1rem auto 0;
    display: flex;
    justify-content: center;
    .news-list-container {
      margin-left: 3rem;
      flex: 1;
      &>.title {
        font-size: .44rem;
      }
      .news-list-wrapper {
        margin-top: .5rem;
        display: flex;
        flex-direction: column;
        li {
          display: flex;
          margin-bottom: .32rem;
          .time-wrapper {
            width: 1.32rem;
            height: 1.32rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            span {
              color: #fff;
              font-size: .28rem;
            }
          }
          .content-wrapper {
            margin-left: .32rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 4px 0;
            .title {
              display: flex;
              .address {
                border-right: 1px solid #aaa;
                padding-right: 10px;
                font-size: .36rem;
                line-height: 1em;
              }
              .time {
                line-height: 1em;
                padding-left: 10px;
                color: #666;
                font-size: .36rem;
              }
            }
            .detail {
              color: #666666;
              font-size: .36rem;
            }
          }
        }
      }
    }
  }
  .view-more {
    display: block;
    width: 4rem;
    height: .96rem;
    font-size: .34rem;
    margin: 1rem auto 0;
  }
}
</style>
